<template>
  <view>
     <view class="class-name">
      {{ name }}
    </view>
    <u-line color="blue" />
    <view class="navbar">
      <u-grid :col="4">
        <u-grid-item @tap="member">
          <u-icon name="account" :size="46"></u-icon>
          <view class="grid-text">成员</view>
        </u-grid-item>
        <u-grid-item @tap="exercise">
          <u-icon name="list-dot" :size="46"></u-icon>
          <view class="grid-text">习题集</view>
        </u-grid-item>
        <u-grid-item @tap="discuss">
          <u-icon name="chat" :size="46"></u-icon>
          <view class="grid-text">讨论区</view>
        </u-grid-item>
        <u-grid-item @tap="more">
          <u-icon name="grid" :size="46"></u-icon>
          <view class="grid-text">更多</view>
        </u-grid-item>
      </u-grid>
    </view>
    <u-line color="blue" />
    <view class="tap">
      <text class="title">教学日志</text>
    </view>
    <u-line color="blue" />
        <view class="leo-list">
      <view
        class="uni-flex uni-row leo-align-items-center leo-space-between leo-list-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="uni-flex uni-row leo-align-items-center">
          <view class="">
            <view
              class="text-line-height-1 text-16 pingfangbold leo-ellipsis-1 u-type-primary"
            >
              <span>
                {{ item.name }}
              </span>
              <view class="time-line">
                <u-time-line>
                  <view class="time-line-item">
                    <u-time-line-item v-for="(data,index1) in item.courseFiles" :key="index1" nodeTop="2">
                      <template v-slot:node>
                        <view class="u-node">
                          <!-- 此处为uView的icon组件 -->
                          <u-icon v-if="data.type === 1" name="word" color="#2979ff" custom-prefix="custom-icon" :size="50"/>
                          <u-icon v-if="data.type === 2" name="PPT" color="#2979ff" custom-prefix="custom-icon" :size="50"/>
                          <u-icon v-if="data.type === 3" name="excel" color="#2979ff" custom-prefix="custom-icon" :size="50"/>
                          <u-icon v-if="data.type === 4" name="PDF" color="#2979ff" custom-prefix="custom-icon" :size="50"/>
                        </view>
                      </template>
                      <template v-slot:content>
                        <view>
                          <view class="time-line-time">
                            <text class="time">{{ data.gmtCreate | dateFormat }}</text>
                          </view>
                          <view class="time-line-title" @click="courseFileClick(data)">{{ data.name }}</view>
                        </view>
                      </template>
                    </u-time-line-item>
                  </view>
                </u-time-line>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" style="bottom: 100rpx;"/>
    </view>
    <u-action-sheet :list="list1" @click="click1" v-model="show"></u-action-sheet>
    <u-popup v-model="show1" mode="top">
      <view class="popup">
        <view class="title">文件保存路径</view>
        <br>
        <view class="word-break">
          {{ content }}
        </view>
      </view>
    </u-popup>
    <view class="bottom-btn">
      <u-button @click="toPostData" type="primary" :ripple="true" size="medium">发布资料</u-button>
    </view>
  </view>
</template>

<script>
import download from "../../utils/downloader";
import { TableFlag } from "../../utils/constants";

export default {
  data() {
    return {
      list1:[{text: '在线预览'},{text: '下载'},{text: '收藏'}],
      show: false,
      courseId: '',
      page: 1,
      status: '',
      total: 0,
      name: '',
      show1: false,
      content: '',
      list: [],
      currentDataFile: {}
    };
  },
  onLoad(event) {
    uni.$emit("setVuexUserInfo", {user: null, isLoginPage: false});
    this.courseId = event.id;
    this.name = event.name;
    this.initial();
    uni.$on("courseFileRefresh", this.initial);
  },
  onReady(){
    uni.setNavigationBarTitle({
      title: this.name
    })
  },
  onPullDownRefresh(){
    this.initial();
  },
  onReachBottom() {
    this.page = ++ this.page;
    this.status = 'loading';
    if((this.page - 1) * 5 > this.total) {
      setTimeout(() => {
        this.status = 'nomore';
      }, 1000)
    }else {
      this.getList().then(res => {
        this.total = res.total;
        this.list = this.list.concat(res.data);
      });
      this.status = 'loadmore';
    }
  },
  methods:{
    initial(){
      this.page = 1;
      this.total = 0;
      this.getList().then(res => {
        this.list = res.data;
        this.total = res.total;
        uni.stopPullDownRefresh();
      })
    },
    async getList(){
      return await this.$u.api.getCourseFilePage(this.courseId,{pageNum: this.page});
    },
    courseFileClick(data){
      this.currentDataFile = data;
      this.show = true;
    },
    click1(index){
      if (index === 0){
        this.toFileShow(this.currentDataFile);
      }else if (index === 1){
        download.load(this.currentDataFile.path,this.currentDataFile.name,false).then(([err,res]) => {
          if (err != null){
            this.$u.toast("出错啦，错误信息：" + err)
          }else {
            // #ifndef H5
            this.content = res.savedFilePath;
            this.show1 = true;
            // #endif
            console.log(res)
          }
        })
      }else {
        let data = {
          userId: this.$store.getters.id,
          resourceId: this.currentDataFile.id,
          tableFlag: TableFlag.COURSE_FILE
        }
        this.$u.api.saveCollect(data).then(res => {
          if (res.code === 200){
            this.$u.toast("收藏成功！");
          }
        })
      }
    },
    toFileShow(courseFile){
      let index = courseFile.path.lastIndexOf(".");
      let data = {
        name: courseFile.name,
        path: courseFile.path.substr(0,index)
      }
      uni.setStorage({
        key: 'pdf-url',
        data: JSON.stringify(data),
        success: (res) => {
          this.$u.route({
            url: 'pages/show_pdf/show_pdf'
          });
        },
        fail: (err) => {
          console.log(err)
          this.$u.toast("出错啦！");
        }
      })

    },
    toPostData(){
      this.$u.route({
        url: 'pages/post_course_file/post_course_file',
        params: {
          id: this.courseId
        }
      });
    },
    member(){
      this.$u.route({
        url: 'pages/member_list/member_list',
        params: {
          id: this.courseId,
          type: 1
        }
      });
    },
    exercise(){
      this.$u.route({
        url: 'pages/exercise_list/exercise_list',
        params: {
          courseId: this.courseId
        }
      });
    },
    discuss() {
      this.$u.route({
        url: '/pages/discuss/discuss',
        params: {
          name: this.name,
          id: this.courseId
        }
      })
    },
    more(){
      this.$u.route({
        url: 'pages/more/more',
        params: {
          id: this.courseId,
          type: 1
        }
      });
    }
  }
}
</script>

<style lang="scss">
.class-name {
  font-size: 35rpx;
  margin: 40rpx 0 30rpx 45rpx;
  color: black;
  font-weight: bolder;
}
.cl{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .class-name {
    font-size: 35rpx;
    margin: 40rpx 0 30rpx 45rpx;
    color: black;
    font-weight: bolder;
  }
  .class-info{
    margin-right: 20rpx;
  }
}
.grid-text {
  font-size: 28rpx;
  margin-top: 4rpx;
  color: $u-type-info;
}
.tap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .title {
    margin: 40rpx 0 30rpx 45rpx;
    color: black;
    font-weight: bolder;
    font-size: 35rpx;
  }

}

.leo-list {
  margin: 15rpx 20rpx;
  background: #ffffff;
  .leo-list-item {
    padding: 18px 12px;
    margin-bottom: 20px;
    box-shadow: -2px 0px 16px 6px rgba(163, 163, 163, 0.15);
  }
}
.uni-flex {
  display: flex;
  flex-direction: row;
}

.uni-flex-item {
  flex: 1;
}

.uni-row {
  flex-direction: row;
}

.uni-column {
  flex-direction: column;
}

.leo-align-items-center {
  align-items: center;
}

.leo-space-between {
  // justify-content: space-between;
}

.text-line-height-1 {
  line-height: 1 !important;
}

.text-12 {
  font-size: 25rpx !important;
}
.text-16 {
  font-size: 30rpx;
}
.leo-ellipsis-1 {
  display: flex;
  flex-direction: column;
  color: #000;
  font-style: 18px;
  font-weight: bold;
  .childstyle {
    padding: 0px 10px 0px 16px;
    .children-for {
      display: flex;
      margin-bottom: 60rpx;
      .children-content {
        color: rgb(40, 40, 40);
        font-style: 16px;
        font-weight: 400;
        /* 强制一行内显示文本 */
        white-space: nowrap;
        /* 超出的部分隐藏 */
        overflow: hidden;
        /* 文字用省略号替代超出部分 */
        text-overflow: ellipsis;
        .timeStyle {
          display: flex;
          margin-top: 6px;
          color: rgba(156, 164, 169, 1);
          font-weight: bold;
          font-size: 12px;
        }
      }
    }
    .children-for:first-child {
      margin-top: 20px;
    }
  }
}
.time-line {

  // #ifdef APP-PLUS || MP
  margin: 40rpx 0 100rpx 45rpx;
  // #endif
  // #ifdef H5
  margin: 40rpx 0 0 45rpx;
  padding-bottom: 70rpx;
  // #endif
  .time-line-item {
    .time-line-time {
      display: flex;
      justify-content: space-between;
      width: 400rpx;
      color: black;
      font-size: 28rpx;
      font-weight: bolder;
      margin-bottom: 30rpx;

    }

    .time-line-title {
      width: 580rpx;
      height: 50rpx;
      background-color: #FEF0F0;
      line-height: 50rpx;
      padding-left: 20rpx;
      color: #2979ff;
      font-size: 28rpx;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
}
.bottom-btn{
  font-size: 30rpx;
  font-weight: bolder;
  bottom: 0;
  right: 50%;
  left: 32%;
  position: fixed;
  margin-bottom: 20rpx;
}
.popup{
  font-size: 40rpx;
  margin: 30rpx;
  .title {
    text-align: center;
    color: #2B85E4;
    margin-bottom: 20rpx;
  }
  .word-break{
    word-wrap: break-word;
  }
}
</style>
